<template>
    <div>
        <Tables 
            :title ='title' 
            :butns = 'butns' 
            :field = 'field' 
            :tableData ='tableData' 
            :animateShow = "animate_show"
            :perNum='per_num' 
            :totalNum="total_num" 
            :collectField = "collect_field" 
            :dbClickDisabled ="true"
            :tableNotice="momal_notice" 
            :curPage ="cur_page" 
            :clearSelectItems ="selectedItems"
            :pageSize='pageSize'
            :rankable ="true"
            @reset="reset"
            @rankData = "rankData" 
            @changePageSize = 'changePageSize' 
            @loadData ="getData"
            @sentSelectedItems="getSelectedItems" 
            @sentEditData="getEditData">
            <div slot="filter">
                <search :searchFiled="searchFiled" @searchEvent = "searchData"></search>
            </div>
        </Tables>

        <Modals 
          :id ="'modal'" 
          :title ="$t('realTime.blackModalTitle')" 
          :field = 'field' 
          :collectField = "collect_field"
          :selectItem = "select_item" 
          :status = "status" 
          :errorMsg="errorMsg" 
          :type="type"
          :selectedItems="selectedItems" 
          :editData = "edit_data" 
          :momalNotice="momal_notice"
          @sentErrorMsg = "getErrorMsg" 
          @addEvent ="addData" 
          @delEvent = "delDada"
         >
          </Modals>
    </div>
</template>
<script>
    import Tables from 'components/common/Tables'
    import Modals from 'components/common/Modals'
    import realTimeService from 'services/realTimeService'
    import PageData from 'libs/PageData'
    import search from 'components/common/search'
    export default {
		components:{
		    Tables,
            Modals,
			search        
	    },
        data() {
            return{
                title:this.$t('realTime.navBtn7'),
                butns: [
                    {
                        type:'add',
                        name:this.$t('common.addBtn'),
                        event:'addEvent',
                        icon:'/static/img/add.png',
                        class:'add_btn',
                    },
                    {
                        type:'del',
                        name:this.$t('common.delBtn'),
                        event:'delEvent',
                        icon:'/static/img/delete.png',
                        class:'del_btn',
                    }
                ],
                field: [
                    {
                        type:'checkbox', 
                    },
                    {
                        type:'rank'
                    },
                    {
                        type:'text',
                        label:this.$t('realTime.blackTableTh1'),
                        name:'mac',
                        regex:/^((2[0-4]\d|25[0-5]|[01]?\d\d?)\.){3}(2[0-4]\d|25[0-5]|[01]?\d\d?)$|^[0-9A-Fa-f]{2}:[0-9A-Fa-f]{2}:[0-9A-Fa-f]{2}:[0-9A-Fa-f]{2}:[0-9A-Fa-f]{2}:[0-9A-Fa-f]{2}$/,
                        requried:true, 
                        remark:this.$t('realTime.w_bRemark1')
                    },
                    {
                        type:'none',
                        label:this.$t('realTime.blackTableTh2'),
                        name:'timestamp',
                    },
                    {
                        type:'textarea',
                        label:this.$t('realTime.blackTableTh3'),
                        name:'note',
                        regex:/^[\w\u4e00-\u9fa5]{1,16}$/,
                        requried:false, 
                        remark:this.$t('realTime.w_bRemark2')    
                    },
                    {
                        type:'none',
                        label:this.$t('realTime.blackTableTh4'),
                        name:'desc'
                    }
                ],
                searchFiled:[
                    {
                        type:'text',
                        label:this.$t('realTime.blackTableTh1'),
                        name:'mac',
                        regex: /^((2[0-4]\d|25[0-5]|[01]?\d\d?)\.){1,3}(2[0-4]\d|25[0-5]|[01]?\d\d?)?$|^([0-9A-Fa-f]{2}:){1,6}$/,
                    },
                    {
                        type:'time-rang',
                        label:this.$t('common.searchLabel1'),
                        name:['start_time','end_time'],
                    }
                ],
                tableData:[],
                per_num:25,
                total_num:1,
                cur_page:1,
                pageSize:[10, 20, 40, 80],
                collect_field:'id',              
                select_item:[],
                status:"",
                errorMsg:'',
                type:'',
                selectedItems:[],
                edit_data:{},
                momal_notice:this.$t('realTime.tableNotice2'),
                finddata:{},
                animate_show:false,
                order:'',
                by:'',
                size:10,
                params:{}
            }
        },
        created() {
            this.getData()
            this.intervalid = setInterval(()=>{this.getData()},1000)
        },
        methods:{
            getSelectedItems(selectedItems) {
                this.selectedItems = selectedItems
            },
            getEditData(editdata) {
                this.edit_data = editdata 
            },
            getErrorMsg(msg) {
                this.errorMsg = msg
            },
            reset(type) {
                this.status = ""
                this.errorMsg = ''
                this.type = type
                $('.inputs_wrap .error_foramt').removeClass('error_foramt')
            }, 
            changePageSize (nowpage, size) {
                this.cur_page = nowpage
                this.size = size
                this.getData()
            }, 
            rankData(param){
                this.order = param.order
                this.by =  param.by
                this.getData()
            },
            searchData(searchData){
                this.animate_show = true
                this.params = searchData
				this.getData()
            },
            getData(){
                realTimeService.getBlackList(this.cur_page,this.size,this.order,this.by,this.params)
                .then((res)=>{
                    this.animate_show = false
                    if(res.errcode === 0){
                        this.tableData = res['4'].data
                        this.total_num = res['4'].count
                    }else{
                        clearInterval(this.intervalid)
                    } 
                })
                .fail((res)=>{
                    clearInterval(this.intervalid)
                })
            },  
            addData(params){
                let note = params.note?params.note:'-'
                let conf = `${params.mac}|${note}`
                realTimeService.addBlackList(conf)
                .then((res)=>{
                    if(res.errcode === 0){
                       this.status ='ok'
                       this.getData()
                       $('#modal').modal('hide')
                    }else {
                        this.status ='error'
                        this.errorMsg = res.errorMessage	
                    }
                })
            },
            delDada(params){
                 this.status ='ing'
                 realTimeService.delBlackList(params.ids)
                .then((res)=>{
                    if(res.errcode === 0){
                        this.status ='ok'
                        this.getData()
                        $('#modal').modal('hide')
                        this.selectedItems = []
                    }else {
                        this.status ='error'
                        this.errorMsg = res.errorMessage	
                    }
                })
            } 

        },
		beforeDestroy() {
			clearInterval(this.intervalid)
		}
    }
</script>